 <template>
 	<view class="my">
 		<view class="my-header" >
 			<image class="image-bg" src="../../static/背景6.jpg" mode=""></image><!--背景图-->
				
 		<view class="header-main">
 	
 			<!--昵称-->	
 			
 		<view class="header-logo" >
 				
 				<image class="logo-img" @click="goto('/pages/set/set')" src="loginStatus ? userInfo.imgurl:'../../static/my photo .png'" mode=""></image>	<!--头像-->	
 				<view class="logo-name">		
			 	 
 				<!--{{  loginStatus ? userInfo.nickName:"用户昵称"}}--><!--如果是登录状态了就显示用户昵称-->
				 <text v-if="!this.user">请先登录</text>
				 <text v-if="this.user">{{this.user.name}}</text>
 			<image v-if="this.user.roleId==2" class="vip-logo" src="../../static/card vip1.png" ></image>
				</view>	<!--昵称-->		
 		</view>
 		</view>
 		</view>
 		
 	
 		<!--权益模块	-->
 		<view class="myself">
 			<view class="myself-title">
 				<view>我的权益</view>
 			</view>
 			<view class="myself-list">
 			<view class="myself-item" @click="goto('/pages/coupon/coupon')">
 			<image  class="myself-img" src="../../static/优惠券 1-1.png" mode=""></image>
 			<view>优惠券</view>
 			</view>
 			<view class="myself-item" @click="goto('/pages/integral/integral')">
 			<image  class="myself-img" src="../../static/收益 1-1.png" mode=""></image>
 			<view>收益</view>
 			</view>
 			<view class="myself-item" @click="goto('/pages/sure/sure')">
 			<image  class="myself-img" src="../../static/vip1-1.png" mode=""></image>
 			<view>vip次数</view>
 			</view>
 			
 		</view>
 		</view>
 		
 		<!--VIP-->
 		<view class="vip" @click="goto('/pages/vip/vip')">
 		
 					<uni-card class="vip-main"  title="vip特权" extra="开通vip>>>" :thumbnail="avatar">
 				</uni-card>
 			
 		</view>
 				
 	<!--我的订单模块-->	
 		<view class="order" >
 			<view class="order-title">
 				<view>我的订单</view>
 			</view>
 			
 			<view class="order-list" >
 			<view class="order-item" @click="goto('/pages/orderform/orderform')">
 			<image  class="order-img" src="../../static/待收货1-1.png" mode=""></image>
 			<view>待收取</view>
 			</view>
 			<view class="order-item" @click="goto('/pages/orderform/orderform')">
 			<image class="order-img" src="../../static/进行中 1-1.png" mode=""></image>
 			<view>进行中</view>
 			</view>
 			<view class="order-item" @click="goto('/pages/orderform/orderform')">
 			<image class="order-img" src="../../static/已完成1-2.png" mode=""></image>
 			<view>已完成</view>
 			</view>
 			<view class="order-item" @click="goto('/pages/orderform/orderform')">
 			<image class="order-img" src="../../static/已取消1-1.png" mode=""></image>
 			<view>已取消</view>
 			</view>
 			<view class="order-item" @click="goto('/pages/orderform/orderform')">
 			<image class="order-img" src="../../static/全部订单1-1.png" mode=""></image>
 			<view>全部订单</view>
 			</view>
 		</view>
 		</view>
 		
 		
 		<!--服务-->
 		<view class="serve">
 			<view class="serve-title">
 				<view>我的服务</view>
 			</view>
 	
 			<view class="serve-list">
 			<view class="serve-item" @click="goto('/pages/shopping/shopping')">
 			<image  class="serve-img"  src="../../static/商城 1-1.png" mode=""></image>
 			<view>豆豆商城</view>
 			</view>
 		<view class="serve-item" @click="goto('/pages/orderform/orderform')">
 		<image  class="serve-img" src="../../static/记录1-1.png" mode=""></image>
 		<view>换购记录</view>
 		</view>
 		<view class="serve-item"  @click="goto('/pages/finding/Invation/Invation')">
 		<image  class="serve-img" src="../../static/分享1-1.png" mode=""></image>
 		<view>分享得豆豆</view>
 		</view>
 		<view class="serve-item" @click="goto('/pages/joinus/joinus')">
 		<image  class="serve-img" src="../../static/加入1-1.png" mode=""></image>
 		<view>加盟我们</view>
 		</view> 
 		
 		<view class="serve-item" @click="goto('/pages/serve/serve')">
 		<image  class="serve-img" src="../../static/服务范围1-1.png" mode=""></image>
 		<view>服务范围</view>
 		</view>
 		<view class="serve-item" @click="goto('/pages/about/about')">
 		<image  class="serve-img" src="../../static/关于我们1-1.png" mode=""></image>
 		<view>关于我们</view>
 		</view>
 		<view class="serve-item"  @click="goto('/pages/link/link')">
 		<image  class="serve-img" src="../../static/联系我们1-1.png" mode=""></image>
 		<view>联系我们</view>
 		</view>
 		<view class="serve-item"  @click="goto('/pages/advantage/advantage')">
 		<image  class="serve-img" src="../../static/优势1-5.png" mode=""></image>
 		<view>我们的优势</view>
 		</view>
 		<view class="serve-item"  @click="goto('/pages/invite/invite')">
 		<image  class="serve-img" src="../../static/邀请1-1.png" mode=""></image>
 		<view>骑手端1</view>
 		</view>
 		
 			</view>
 			</view>
 			
 	<!--登录
 		<view class="btns">
 	      <view class="btn" @click="goto('/pages/login/login')">
 			  <button type="primary">登录</button>
 		  </view>	  
 	    </view>-->
 
 	<view class="btns">
 		 <button v-if="this.user" id="myButton" type="primary" @click='outLogin'>退出登录</button>
		 <button v-if="!this.user"	id="myButton" type="primary" @click='login'>登录</button>
 	</view>
 		
 	
 		<Tabbar cureentPage='my'></Tabbar>
 
 
 	</view>
 	
 </template>
 
 
 <script>
 	 import {mapMutations} from 'vuex';
 		import $http from '@/common/api/request.js'//引入request组件
 		import Tabbar from '../../components/common/Tabbar.vue'
 	import {mapState} from 'vuex';
	
   export default {
 	  data() {//卡片
 	  			return {
 				
 					     showFavorites: false,
 					     showUpdates: false,
 					     receiveNotifications: false,
 					   
 					     sex: '',
 					     introduction: '',	
						 user:[],
 	  				avatar: '/static/card vip1.png',
 	  				extraIcon:{
 	  					color: '#4cd964',
 	  					size: '22',
 	  					type: 'gear-filled',
						

					
						
 	  				}
 	  			}
 	  		},
 			components: {
 				Tabbar
 			},
 	  /*computed:{
 		  ...mapState({
 			  loginStatus:state=>state.user.loginStatus,
 			  userInfo:state=>state.user.userInfo
 		  })
 	  },*/
	mounted() {
		
		//全局变量用户ID
		this.userId = uni.getStorageSync('userId');
			this.user = uni.getStorageSync('user');
			//this.userName = uni.getStorageSync('user.name');
			console.log('555',this.user)
				  	this.userId = uni.getStorageSync('userId');
					
		//this.address();
	},

     methods: {
 		...mapMutations(['loginOut']),
 		goPathList() {
 		  uni.navigateTo({
 		   url:'../my-path-list/my-path-list'
 		  })
 		},	  save() {
 	      // 保存用户信息逻辑
 	    },
		login(){
			uni.navigateTo({
			 url:'../login/login'
			})
		},
 	  outLogin(){ 
		  if(!this.user){
			  uni.navigateTo({
			   url:'../login/login'
			  })
		  }
		  else{
 		  uni.showToast({
 			  title:"退出成功",
 			  icon:"none",
			  duration: 1000
 		  })
 		  this.loginOut();//调用user.js的函数loginout
 		   // 删除本地缓存中的user数组
 		   uni.removeStorageSync('user');
 		 
 		   // 将computed属性中的user字段设为空数组
 		   this.user = [];
		 setTimeout(() => {
 		   uni.navigateTo({
 		     url: '../index/index' 
 		   });
 		 }, 1000);
 		 }
 	  },
       goto(url) {
		   if(!this.user){
		   			  uni.navigateTo({
		   			   url:'../login/login'
		   			  })
		   }
		   else{
			   uni.navigateTo({
           url: url
         })
		   }
         
       },
	 
 	  
 	  onClick(url){//卡片//在vip模块测试token,触发这个方法时，就检验登录没有，就是检测token值，涉及到request.js和user.js文件main.js
 	  
 	/*  $http.request({
 	  	url:"/account/token测试",
 	  	method:"POST",
 		header:{
 			token:true
 		}
 	  
 	  }).then((res)=>{
 	  	
 	  	console.log(res);
 	  	
 	  }).catch(()=>{
 	  	uni.showToast({
 	  		title:'请求失败',
 	  		icon:'none'
 	  	})
 	  })*/
 	  	uni.navigateTo({
 	  	   url: url
 	  	  })
 	  },
 	  actionsClick(text){//卡片
 	  	uni.showToast({
 	  		title:text,
 	  		icon:'none'
 	  	})
 	  },
 	  
 	    switchTab(url) {//tabbar
 	      uni.switchTab({
 	        url: url
 	      })
 	    }
 	  
 	  
      }
 	 
 	
 	 	
 	 
   }
 </script>
 
 
 <style scoped>
 
 //顶部栏
 	.my{
 	
 	}
 	
 	.my-header{
 	
 		position: relative;
 		z-index: 0; // 支付宝小程序下背景不生效时，可以加上这个
 	    height:320rpx ;	
 	}
 	.image-bg {
 		
 	    position: absolute;
 	    z-index: -1;
 	    left: 0;
 	    right: 0;
 	    bottom: 0;
 	    right: 0;
 	    width: 100%;
 	    height: 100%;
 	}
 	.header-main{
 		
 		position: relative;
 		top: 100rpx;
 		
 	}
 	.header-config{
 		position: absolute;
 		left: 40rpx;
 	}
 	.header-logo{
 		display: flex;
 		justify-content: space-between; //让元素水平排开
 		position: absolute;
 		left: 10%;	
 		width: 60%;
 	}
 
 	.logo-img{
 		width: 120rpx;
 		height: 120rpx;
 		border-radius: 50%;
 		border: 2rpx solid #CCCCCC;
 		background-color: #FFFFFF;
 	}
 
 	.logo-name{
		margin-top: 30rpx;
		display: flex;
		justify-content: space-between; //让元素水平排开
 		width: 300rpx;
 		font-weight: bold;
 		color: darkslategray;
 		font-size: 33rpx;
 		
 
 	}
 	
 	.vip-logo{
 		left: -50rpx;
		margin-top: -10rpx;
 		width:60rpx;
 		height: 60rpx;
 		border-radius: 50%;
 	}
 	
 	.count{
 		font-size: 30rpx;
 		font-weight: 200;
 	}
 	
 	
 	//权益模块
 	.myself{
 	
 	margin: 30rpx;
 	margin-top: 60rpx;
 	/*box-shadow:0 0 1px 1px rgba(0, 0, 0, 0.2);*/
 	}
 	.myself-title{
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
 	padding: 20rpx;
 	background-color: aliceblue;;
 	font-weight: bold;;
 	}
 	
 	.myself-list{
 		padding: 20rpx;
 		display: flex;
 		flex-wrap: wrap;
 		
 		background-color: azure;
 	}
 	.myself-item{
 		width: 33%;
 		padding: 10rpx;
 		display: flex;
 		flex-direction: column;
 		justify-content: center;
 		align-items: center;
 	
 	}
 	.myself-img{
 		width:56rpx ;
 		height: 56rpx;
 	}
 	
 	
 	//vip模块
 	.vip{
 	padding-top: 5rpx;
 		}
 	.vip-main{
 		
 		height: 105rpx;
 		background-image: url("../../static/背景6.jpg");
 		
 	}
 	
 	//订单模块
 	.order{
 		 
 		 margin: 30rpx;
 		 margin-top: 60rpx;
 		/* box-shadow:0 0 1px 1px rgba(0, 0, 0, 0.2);*/
 	}
 	.order-title{
 		display: flex;
 		justify-content: space-between;
 		align-items: center;
 		padding: 20rpx;
 		font-weight: bold;
 		background-color: aliceblue;
 	
 	}
 	
 	.order-list{
 		padding: 20rpx;
 		display: flex;
 		background-color:azure;
 		
 	}
 	.order-item{
 		flex: 1;
 		display: flex;
 		flex-direction: column;
 		justify-content: center;
 		align-items: center;
 	}
 	.order-img{
 		width:56rpx ;
 		height: 56rpx;
 	}
 	
 	//服务模块
 	.serve{
 	margin: 30rpx;
 	margin-top: 60rpx;
 /*box-shadow:0 0 1px 1px rgba(0, 0, 0, 0.2);*/
 	}
 	.serve-title{
 		display: flex;
 		justify-content: space-between;
 		align-items: center;
 		padding: 20rpx;
 		font-weight: bold;
 		background-color: aliceblue;;
 	}
 	
 	.serve-list{
 		padding: 20rpx;
 		display: flex;
 		flex-wrap: wrap;
 		background-color: azure;
 	
 	}
 	.serve-item{
 		width: 33%;
 		padding: 35rpx;
 		display: flex;
 		flex-direction: column;
 		justify-content: center;
 		align-items: center;
 		
 
 	}
 	.serve-img{
 		width:56rpx ;
 		height: 56rpx;
 	}
 	
 	//退出登录1
 	 .btns {	
 	margin-left: -20rpx;
 	margin-right:-20rpx;
 	
 	padding: 50rpx;
 	
 	  }
 	  .btn {
 	 
 	  }
 	
 	
 	
 	
 
 	</style>